CSS: image with text caption in box

Hi,

In the spirit of CSS (as I understand it!) I'm trying to eliminate 
HTML tables from my site, at least for advanced CSS-compliant 
browsers (IE 5 and NN6).

I need a structure that is found in lots of pages, which is an image 
in a box with text under it (typically, the image caption), floated 
either left or right of any other elements in the page.

I'm looking to define a "div" which will do this for me.

Using old-fashioned HTML with a little help from PHP, the required 
box is easy to create with a structure of the type:

echo "<table align=\"$img_align\" width=\"$img_width\" cellpadding=\"2\">
<tr>
<td align=\"center\">
<img src=\"foo.jpg\" />
<p>$img_caption</p>
</td>
</tr>
</table>" ;

This floats the table right or left, and constrains its width to that 
of the image.

However I can't work out how to create this pretty basic mechanism 
via CSS, without using an HTML table.

(Unless I'm mistaken, Eric A. Meyer's Nutshell book doesn't have much 
to say on the subject of images in boxes).

What I want is a box that will automatically be constrained to the 
width of the image it contains.

NB: I could do this by having PHP parse the css file, and feeding it 
the required width in a query string, to be inserted into the "div" 
specifications.

But this seems like using a sledgehammer to crack a nut - and would 
cause other problems, such as limiting me to only one image-in-a-box 
per page.

Any help gratefully received.
-- 
David Sharp, journaliste, France http://www.sharp-words.com/
E-mail <mailto:david.sharp(at)sharp-words.com>

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA